<template>
    <div id="project-select" v-if="currentProject">
        <a-dropdown :trigger="['click']"
                    v-model="visibleMenu"
                    class="action-item" placement="bottomCenter">
            <a-tooltip :mouseEnterDelay="0.3" :title="currentProject.name">
                <a class="project-select" style="color: #333" @click="visibleMenu = true">
                    <span>{{currentProject.name}}</span>
                    <span class="m-l-xs"><a-icon type="down"/></span>
                </a>
            </a-tooltip>
            <div slot="overlay" class="middle-menu member-menu project-select-menu">
                <div class="search-content">
                    <a-input v-model="keyword" size="large" placeholder="搜索">
                        <a-icon slot="prefix" type="search"/>
                    </a-input>
                </div>
                <div class="member-list">
                    <vue-scroll>
                        <div class="list-group">
                            <a-list
                                    class="list-content"
                                    itemLayout="horizontal"
                                    :dataSource="projectList"
                                    :locale="{emptyText: (keyword && keyword.length > 1) ? '没有找到该项目' : ''}"
                            >
                                <a-list-item class="member-list-item"
                                             slot="renderItem"
                                             slot-scope="item"
                                             @click.native="changeProject(item.code)">
                                 <span slot="actions">
                                    <a-icon type="check" v-show="showCheck(item.code)"></a-icon>
                                 </span>
                                    <a-list-item-meta>
                                        <span slot="title">{{item.name}}</span>
                                        <a-avatar slot="avatar" icon="user" :src="item.cover"/>
                                    </a-list-item-meta>
                                </a-list-item>
                            </a-list>
                        </div>
                    </vue-scroll>
                </div>
            </div>
        </a-dropdown>
    </div>
</template>

<script>
    import _ from 'lodash'
    import {mapState} from 'vuex'
    import {read as getProject, selfList as getProjectList} from "../../api/project";
    import pagination from "../../mixins/pagination";

    export default {
        name: 'ProjectSelect',
        props: {
            code: {
                type: [String],
                default() {
                    return ''
                }
            },
        },
        data() {
            return {
                visibleMenu: false,
                keyword: '',
                loading: false,
                currentProject: null,
                projectList: [],
                projectListCopy: [],
                projectTotal: 0,
            }
        },
        mixins: [pagination],
        computed: {
            ...mapState({
                currentOrganization: state => state.currentOrganization,
                organizationList: state => state.organizationList
            })
        },
        watch: {
            code() {
                this.init();
            },
            keyword() {
                this.search();
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.getProject();
                this.getProjectList(true);
            },
            getProject() {
                getProject(this.code).then((res) => {
                    this.currentProject = res.data;
                });
            },
            getProjectList(loading = true) {
                this.loading = loading;
                this.requestData.pageSize = 50;
                this.requestData.archive = -1;
                getProjectList(this.requestData).then(res => {
                    this.projectList = res.data.list;
                    this.projectListCopy = res.data.list;
                    this.projectTotal = res.data.total;
                    this.loading = false;
                });
            },
            changeProject(code) {
                this.visibleMenu = false;
                this.$router.push('/project/space/task/' + code);
            },
            showCheck(code) {
                if (code == this.code) {
                    return true;
                }
            },
            search: _.debounce(
                function () {
                    this.keyword = this.keyword.trim();
                    if (!this.keyword) {
                        this.projectList = JSON.parse(JSON.stringify(this.projectListCopy));
                    }
                    if (this.keyword.length <= 1) {
                        return false;
                    }
                    // this.searching = true;
                    this.projectList = this.projectList.filter(item => item.name.indexOf(this.keyword) != -1);
                }, 500
            ),
            getPopup() {
                return document.getElementById('project-select');
            },
        }
    }
</script>

<style lang="less">
    #project-select {
        cursor: pointer;

        :hover {
            /*background: rgba(0, 0, 0, 0.025);*/
        }
    }

    .project-select-menu {
        margin-left: 10px;

        .member-list {
            height: 290px;
        }
    }
</style>
